<template>
    <layout title="全部分类">
        <div class="list">
            <mt-header fixed title="全部分类">
                <a href="/forum" id="backpage" slot="left">
                    <mt-button icon="back"></mt-button>
                </a>
            </mt-header>

            <div class="content">
                <ul class="flex_l">
                    <li v-for="(item, index) in obj" :class="{active:currentId == item.id}" @click="change(index, item.id)">{{item.name}} </li>
                </ul>
                <div class="view">
                    <ul class="flex_r">
                        <li v-for="item in list">
                            <a :href="'/forum/topic/' + item.id">
                                <img :src="api.image + item.icon" />
                                <div class="list_li">
                                    <div class="list_name">{{item.forumTypeName}}社区</div>
                                    <div class="list_t">人气 {{item.browseCount}}   容帖子 {{item.postCount}}</div>
                                </div>
                                <div class="list_r">进入社区</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </layout>
</template>
<style lang="scss">
    @import "index";
</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                currentId: '',
                list:[]
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        methods: {
            change(index, id) {
                this.num = index;
                this.seleec(id)
            },
            seleec(id) {
                this.currentId = id;
                this.list = this.obj[id].forumDTOs;
            }
        },
        created(){
        },
        mounted() {
            this.currentId = this.forumTypeId;

            this.list = this.obj[this.forumTypeId].forumDTOs;
        }
    }
</script>

